<template>
  <div class="device-parameter">
    <h2 class="title">*第一列为小型，第二列为中型，第三列为大型</h2>
    <div class="form-section">
      <!-- 燃气锅炉部分 -->
      <div class="equipment-section">
          <button class="distribution-btn device-submit-btn" @click="submitAllDeviceParams">
            <span class="btn-text">提交设备参数</span>

          </button>
        <h3 class="equipment-title">燃气锅炉</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="ranqiguolu11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="ranqiguolu12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="ranqiguolu13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="ranqiguolu21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="ranqiguolu22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="ranqiguolu23" class="form-input">
            </div>
          </div>
        </div>

      </div>
      <!-- 凝汽式热电联产机组部分 -->
      <div class="equipment-section">
        <h3 class="equipment-title">凝汽式热电联产机组</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="ningqishi11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="ningqishi12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="ningqishi13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="ningqishi21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="ningqishi22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="ningqishi23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <!-- 背压式热电联产机组部分 -->
      <div class="equipment-section">
        <h3 class="equipment-title">背压式热电联产机组</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="beiyashi11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="beiyashi12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="beiyashi13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="beiyashi21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="beiyashi22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="beiyashi23" class="form-input">
            </div>
          </div>
        </div>
      </div>
      <!-- 火力发电机组部分 -->
      <div class="equipment-section">
        <h3 class="equipment-title">火力发电机组</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="huoli11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="huoli12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="huoli13" class="form-input">
            </div>
          </div>
        </div>

         <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="huoli21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="huoli22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="huoli23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">核电站</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="hedian11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="hedian12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="hedian13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="hedian21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="hedian22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="hedian23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">地热能机组</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="dire11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="dire12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="dire13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dire21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dire22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dire23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">抽水蓄能</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="choushui11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="choushui12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="choushui13" class="form-input">
            </div>
          </div>
        </div>

         <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="choushui21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="choushui22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="choushui23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">分布式光伏</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="fenbushi11" class="form-input">
            </div>
             <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="fenbushi12" class="form-input">
            </div>
             <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="fenbushi13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="fenbushi21" class="form-input">
            </div>
             <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="fenbushi22" class="form-input">
            </div>
             <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="fenbushi23" class="form-input">
            </div>
          </div>
        </div>
      </div>


      <div class="equipment-section">
        <h3 class="equipment-title">集中式光伏</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="jizhongshi11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="jizhongshi12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="jizhongshi13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="jizhongshi21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="jizhongshi22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="jizhongshi23" class="form-input">
            </div>
          </div>
        </div>
      </div>


      <div class="equipment-section">
        <h3 class="equipment-title">海上风电</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="haishang11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="haishang12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="haishang13" class="form-input">
            </div>
          </div>
        </div>

         <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="haishang23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <!-- Group 51 -->
      <div class="equipment-section">
        <h3 class="equipment-title">陆上风电</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="lushang11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="lushang12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="lushang13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="lushang23" class="form-input">
            </div>
          </div>
        </div>
      </div>

       <div class="equipment-section">
        <h3 class="equipment-title">聚光太阳能</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="juguang11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="juguang12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="juguang13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="juguang23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">太阳能供热</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="gongre11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="gongre12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="gongre13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="gongre21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="gongre22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="gongre23" class="form-input">
            </div>
          </div>
        </div>
      </div>

       <div class="equipment-section">
        <h3 class="equipment-title">压缩式热泵</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="yasuo11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="yasuo12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="yasuo13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="yasuo21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="yasuo22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="yasuo23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">地源热泵</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="diyuan11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="diyuan12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="diyuan13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="diyuan21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="diyuan22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="diyuan23" class="form-input">
            </div>
          </div>
        </div>
      </div>

      <div class="equipment-section">
        <h3 class="equipment-title">电解槽</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="dianjiecao11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="dianjiecao12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="dianjiecao13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianjiecao21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianjiecao22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianjiecao23" class="form-input">
            </div>
          </div>
        </div>
      </div>


     <div class="equipment-section">
        <h3 class="equipment-title">碳捕集</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="tanbuji11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="tanbuji12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="tanbuji13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="tanbuji21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="tanbuji22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="tanbuji23" class="form-input">
            </div>
          </div>
        </div>
      </div>

     <div class="equipment-section">
        <h3 class="equipment-title">燃料电池</h3>

        <div class="input-group">
          <label class="input-label">故障率(%)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label">第一组</div>
              <input type="number" v-model="dianchi11" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第二组</div>
              <input type="number" v-model="dianchi12" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label">第三组</div>
              <input type="number" v-model="dianchi13" class="form-input">
            </div>
          </div>
        </div>

        <div class="input-group">
          <label class="input-label">故障修复时间(h)</label>
          <div class="input-controls">
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianchi21" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianchi22" class="form-input">
            </div>
            <div class="column-wrapper">
              <div class="column-label"></div>
              <input type="number" v-model="dianchi23" class="form-input">
            </div>
          </div>
        </div>
      </div>
   </div>
  </div>

</template>

<script lang="ts" setup>
import { ref, onMounted, type Ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus';

const submitAllDeviceParams = async () => {
  try {
    const payloads = [
 { id: 1, value: parseFloat(ranqiguolu11.value) || 0, url: 'guolu' },
  { id: 2, value: parseFloat(ranqiguolu12.value) || 0, url: 'guolu' },
  { id: 3, value: parseFloat(ranqiguolu13.value) || 0, url: 'guolu' },
  { id: 1, value: parseFloat(ningqishi11.value) || 0, url: 'ningqi' },
  { id: 2, value: parseFloat(ningqishi12.value) || 0, url: 'ningqi' },
  { id: 3, value: parseFloat(ningqishi13.value) || 0, url: 'ningqi' },
  { id: 1, value: parseFloat(beiyashi11.value) || 0, url: 'beiya' },
  { id: 2, value: parseFloat(beiyashi12.value) || 0, url: 'beiya' },
  { id: 3, value: parseFloat(beiyashi13.value) || 0, url: 'beiya' },
  { id: 1, value: parseFloat(huoli11.value) || 0, url: 'huoli' },
  { id: 2, value: parseFloat(huoli12.value) || 0, url: 'huoli' },
  { id: 3, value: parseFloat(huoli13.value) || 0, url: 'huoli' },
  { id: 1, value: parseFloat(hedian11.value) || 0, url: 'hedian' },
  { id: 1, value: parseFloat(dire11.value) || 0, url: 'dire' },
  { id: 2, value: parseFloat(dire12.value) || 0, url: 'dire' },
  { id: 3, value: parseFloat(dire13.value) || 0, url: 'dire' },
  { id: 1, value: parseFloat(choushui11.value) || 0, url: 'choushui' },
  { id: 2, value: parseFloat(choushui12.value) || 0, url: 'choushui' },
  { id: 3, value: parseFloat(choushui13.value) || 0, url: 'choushui' },
  { id: 1, value: parseFloat(jizhongshi11.value) || 0, url: 'jizhong' },
  { id: 2, value: parseFloat(jizhongshi12.value) || 0, url: 'jizhong' },
  { id: 3, value: parseFloat(jizhongshi13.value) || 0, url: 'jizhong' },
  { id: 1, value: parseFloat(haishang11.value) || 0, url: 'haishang' },
  { id: 2, value: parseFloat(haishang12.value) || 0, url: 'haishang' },
  { id: 3, value: parseFloat(haishang13.value) || 0, url: 'haishang' },
  { id: 1, value: parseFloat(lushang11.value) || 0, url: 'lushang' },
  { id: 2, value: parseFloat(lushang12.value) || 0, url: 'lushang' },
  { id: 3, value: parseFloat(lushang13.value) || 0, url: 'lushang' },
  { id: 1, value: parseFloat(juguang11.value) || 0, url: 'juguang' },
  { id: 2, value: parseFloat(juguang12.value) || 0, url: 'juguang' },
  { id: 3, value: parseFloat(juguang13.value) || 0, url: 'juguang' },
  { id: 1, value: parseFloat(gongre11.value) || 0, url: 'gongre' },
  { id: 2, value: parseFloat(gongre12.value) || 0, url: 'gongre' },
  { id: 3, value: parseFloat(gongre13.value) || 0, url: 'gongre' },
  { id: 1, value: parseFloat(yasuo11.value) || 0, url: 'yasuo' },
  { id: 2, value: parseFloat(yasuo12.value) || 0, url: 'yasuo' },
  { id: 3, value: parseFloat(yasuo13.value) || 0, url: 'yasuo' },
  { id: 1, value: parseFloat(diyuan11.value) || 0, url: 'diyuan' },
  { id: 2, value: parseFloat(diyuan12.value) || 0, url: 'diyuan' },
  { id: 3, value: parseFloat(diyuan13.value) || 0, url: 'diyuan' },
  { id: 1, value: parseFloat(dianjiecao11.value) || 0, url: 'dianjiecao' },
  { id: 2, value: parseFloat(dianjiecao12.value) || 0, url: 'dianjiecao' },
  { id: 3, value: parseFloat(dianjiecao13.value) || 0, url: 'dianjiecao' },
  { id: 1, value: parseFloat(tanbuji11.value) || 0, url: 'tanbuji' },
  { id: 2, value: parseFloat(tanbuji12.value) || 0, url: 'tanbuji' },
  { id: 3, value: parseFloat(tanbuji13.value) || 0, url: 'tanbuji' },
  { id: 1, value: parseFloat(dianchi11.value) || 0, url: 'dianchi' },
  { id: 2, value: parseFloat(dianchi12.value) || 0, url: 'dianchi' },
  { id: 3, value: parseFloat(dianchi13.value) || 0, url: 'dianchi' },

    ]

    for (const item of payloads) {
      await axios.put(`http://localhost:8080/${item.url}`, {
        id: item.id,
        value: item.value
      })
    }

    ElMessage.success('所有设备参数提交成功')
  } catch (err) {
    ElMessage.error('提交失败，请检查网络或数据')
    console.error(err)
  }
}

const fetchAndSet = async (url: string, variable: Ref<string>) => {
  try {
    const response = await axios.get(url);
    variable.value = response.data.value;
  } catch  {
    ElMessage.error(`加载 ${url} 失败`);
  }
};

onMounted(async () => {

await fetchAndSet('http://localhost:8080/guolu/22', ranqiguolu11);
await fetchAndSet('http://localhost:8080/guolu/23', ranqiguolu12);
await fetchAndSet('http://localhost:8080/guolu/24', ranqiguolu13);
await fetchAndSet('http://localhost:8080/guolu/25', ranqiguolu21);
await fetchAndSet('http://localhost:8080/guolu/26', ranqiguolu22);
await fetchAndSet('http://localhost:8080/guolu/27', ranqiguolu23);

await fetchAndSet('http://localhost:8080/ningqi/23', ningqishi11);
await fetchAndSet('http://localhost:8080/ningqi/24', ningqishi12);
await fetchAndSet('http://localhost:8080/ningqi/25', ningqishi13);
await fetchAndSet('http://localhost:8080/ningqi/26', ningqishi21);
await fetchAndSet('http://localhost:8080/ningqi/27', ningqishi22);
await fetchAndSet('http://localhost:8080/ningqi/28', ningqishi23);

await fetchAndSet('http://localhost:8080/beiya/29', beiyashi11);
await fetchAndSet('http://localhost:8080/beiya/30', beiyashi12);
await fetchAndSet('http://localhost:8080/beiya/31', beiyashi13);
await fetchAndSet('http://localhost:8080/beiya/32', beiyashi21);
await fetchAndSet('http://localhost:8080/beiya/33', beiyashi22);
await fetchAndSet('http://localhost:8080/beiya/34', beiyashi23);

await fetchAndSet('http://localhost:8080/huoli/19', huoli11);
await fetchAndSet('http://localhost:8080/huoli/20', huoli12);
await fetchAndSet('http://localhost:8080/huoli/21', huoli13);
await fetchAndSet('http://localhost:8080/huoli/22', huoli21);
await fetchAndSet('http://localhost:8080/huoli/23', huoli22);
await fetchAndSet('http://localhost:8080/huoli/24', huoli23);

await fetchAndSet('http://localhost:8080/hedian/17', hedian11);
await fetchAndSet('http://localhost:8080/hedian/18', hedian12);
await fetchAndSet('http://localhost:8080/hedian/19', hedian13);
await fetchAndSet('http://localhost:8080/hedian/20', hedian21);
await fetchAndSet('http://localhost:8080/hedian/21', hedian22);
await fetchAndSet('http://localhost:8080/hedian/22', hedian23);

await fetchAndSet('http://localhost:8080/dire/19', dire11);
await fetchAndSet('http://localhost:8080/dire/20', dire12);
await fetchAndSet('http://localhost:8080/dire/21', dire13);
await fetchAndSet('http://localhost:8080/dire/22', dire21);
await fetchAndSet('http://localhost:8080/dire/23', dire22);
await fetchAndSet('http://localhost:8080/dire/24', dire23);

await fetchAndSet('http://localhost:8080/choushui/22', choushui11);
await fetchAndSet('http://localhost:8080/choushui/23', choushui12);
await fetchAndSet('http://localhost:8080/choushui/24', choushui13);
await fetchAndSet('http://localhost:8080/choushui/25', choushui21);
await fetchAndSet('http://localhost:8080/choushui/26', choushui22);
await fetchAndSet('http://localhost:8080/choushui/27', choushui23);

await fetchAndSet('http://localhost:8080/fenbushi/19', fenbushi11);
await fetchAndSet('http://localhost:8080/fenbushi/20', fenbushi12);
await fetchAndSet('http://localhost:8080/fenbushi/21', fenbushi13);
await fetchAndSet('http://localhost:8080/fenbushi/22', fenbushi21);
await fetchAndSet('http://localhost:8080/fenbushi/23', fenbushi22);
await fetchAndSet('http://localhost:8080/fenbushi/24', fenbushi23);

await fetchAndSet('http://localhost:8080/jizhong/19', jizhongshi11);
await fetchAndSet('http://localhost:8080/jizhong/20', jizhongshi12);
await fetchAndSet('http://localhost:8080/jizhong/21', jizhongshi13);
await fetchAndSet('http://localhost:8080/jizhong/22', jizhongshi21);
await fetchAndSet('http://localhost:8080/jizhong/23', jizhongshi22);
await fetchAndSet('http://localhost:8080/jizhong/24', jizhongshi23);

await fetchAndSet('http://localhost:8080/haishang/28', haishang11);
await fetchAndSet('http://localhost:8080/haishang/29', haishang12);
await fetchAndSet('http://localhost:8080/haishang/30', haishang13);
await fetchAndSet('http://localhost:8080/haishang/31', haishang21);
await fetchAndSet('http://localhost:8080/haishang/32', haishang22);
await fetchAndSet('http://localhost:8080/haishang/33', haishang23);

await fetchAndSet('http://localhost:8080/lushang/28', lushang11);
await fetchAndSet('http://localhost:8080/lushang/29', lushang12);
await fetchAndSet('http://localhost:8080/lushang/30', lushang13);
await fetchAndSet('http://localhost:8080/lushang/31', lushang21);
await fetchAndSet('http://localhost:8080/lushang/32', lushang22);
await fetchAndSet('http://localhost:8080/lushang/33', lushang23);

await fetchAndSet('http://localhost:8080/juguang/28', juguang11);
await fetchAndSet('http://localhost:8080/juguang/29', juguang12);
await fetchAndSet('http://localhost:8080/juguang/30', juguang13);
await fetchAndSet('http://localhost:8080/juguang/31', juguang21);
await fetchAndSet('http://localhost:8080/juguang/32', juguang22);
await fetchAndSet('http://localhost:8080/juguang/33', juguang23);

await fetchAndSet('http://localhost:8080/gongre/19', gongre11);
await fetchAndSet('http://localhost:8080/gongre/20', gongre12);
await fetchAndSet('http://localhost:8080/gongre/21', gongre13);
await fetchAndSet('http://localhost:8080/gongre/22', gongre21);
await fetchAndSet('http://localhost:8080/gongre/23', gongre22);
await fetchAndSet('http://localhost:8080/gongre/24', gongre23);
// 压缩式热泵
await fetchAndSet('http://localhost:8080/yasuo/19', yasuo11);
await fetchAndSet('http://localhost:8080/yasuo/20', yasuo12);
await fetchAndSet('http://localhost:8080/yasuo/21', yasuo13);
await fetchAndSet('http://localhost:8080/yasuo/22', yasuo21);
await fetchAndSet('http://localhost:8080/yasuo/23', yasuo22);
await fetchAndSet('http://localhost:8080/yasuo/24', yasuo23);
// 地源热泵
await fetchAndSet('http://localhost:8080/diyuan/19', diyuan11);
await fetchAndSet('http://localhost:8080/diyuan/20', diyuan12);
await fetchAndSet('http://localhost:8080/diyuan/21', diyuan13);
await fetchAndSet('http://localhost:8080/diyuan/22', diyuan21);
await fetchAndSet('http://localhost:8080/diyuan/23', diyuan22);
await fetchAndSet('http://localhost:8080/diyuan/24', diyuan23);
// 电解槽
await fetchAndSet('http://localhost:8080/dianjiecao/22', dianjiecao11);
await fetchAndSet('http://localhost:8080/dianjiecao/23', dianjiecao12);
await fetchAndSet('http://localhost:8080/dianjiecao/24', dianjiecao13);
await fetchAndSet('http://localhost:8080/dianjiecao/25', dianjiecao21);
await fetchAndSet('http://localhost:8080/dianjiecao/26', dianjiecao22);
await fetchAndSet('http://localhost:8080/dianjiecao/27', dianjiecao23);


// 燃料电池
await fetchAndSet('http://localhost:8080/dianchi/22', dianchi11);
await fetchAndSet('http://localhost:8080/dianchi/23', dianchi12);
await fetchAndSet('http://localhost:8080/dianchi/24', dianchi13);
await fetchAndSet('http://localhost:8080/dianchi/25', dianchi21);
await fetchAndSet('http://localhost:8080/dianchi/26', dianchi22);
await fetchAndSet('http://localhost:8080/dianchi/27', dianchi23);

// 碳捕集
await fetchAndSet('http://localhost:8080/tanbuji/18', tanbuji11);
await fetchAndSet('http://localhost:8080/tanbuji/19', tanbuji12);
await fetchAndSet('http://localhost:8080/tanbuji/20', tanbuji13);
await fetchAndSet('http://localhost:8080/tanbuji/21', tanbuji21);
await fetchAndSet('http://localhost:8080/tanbuji/22', tanbuji22);
await fetchAndSet('http://localhost:8080/tanbuji/23', tanbuji23);

})

// Data for all 51 groups
const ranqiguolu11 = ref('')
const ranqiguolu12 = ref('')
const ranqiguolu13 = ref('')
const ranqiguolu21 = ref('')
const ranqiguolu22 = ref('')
const ranqiguolu23 = ref('')

const ningqishi11 = ref('')
const ningqishi12 = ref('')
const ningqishi13 = ref('')
const ningqishi21 = ref('')
const ningqishi22 = ref('')
const ningqishi23 = ref('')

const beiyashi11 = ref('')
const beiyashi12 = ref('')
const beiyashi13 = ref('')
const beiyashi21 = ref('')
const beiyashi22 = ref('')
const beiyashi23 = ref('')

const huoli11 = ref('')
const huoli12 = ref('')
const huoli13 = ref('')
const huoli21 = ref('')
const huoli22 = ref('')
const huoli23 = ref('')

const hedian11 = ref('')
const hedian12 = ref('')
const hedian13 = ref('')
const hedian21 = ref('')
const hedian22 = ref('')
const hedian23 = ref('')

const dire11 = ref('')
const dire12 = ref('')
const dire13 = ref('')
const dire21 = ref('')
const dire22 = ref('')
const dire23 = ref('')

const choushui11 = ref('')
const choushui12 = ref('')
const choushui13 = ref('')
const choushui21 = ref('')
const choushui22 = ref('')
const choushui23 = ref('')

const fenbushi11 = ref('')
const fenbushi12 = ref('')
const fenbushi13 = ref('')
const fenbushi21 = ref('')
const fenbushi22 = ref('')
const fenbushi23 = ref('')

const jizhongshi11 = ref('')
const jizhongshi12 = ref('')
const jizhongshi13 = ref('')
const jizhongshi21 = ref('')
const jizhongshi22 = ref('')
const jizhongshi23 = ref('')

const haishang11 = ref('')
const haishang12 = ref('')
const haishang13 = ref('')
const haishang21 = ref('')
const haishang22 = ref('')
const haishang23 = ref('')

const lushang11 = ref('')
const lushang12 = ref('')
const lushang13 = ref('')
const lushang21 = ref('')
const lushang22 = ref('')
const lushang23 = ref('')

const juguang11 = ref('')
const juguang12 = ref('')
const juguang13 = ref('')
const juguang21 = ref('')
const juguang22 = ref('')
const juguang23 = ref('')

const gongre11 = ref('')
const gongre12 = ref('')
const gongre13 = ref('')
const gongre21 = ref('')
const gongre22 = ref('')
const gongre23 = ref('')

const yasuo11 = ref('')
const yasuo12 = ref('')
const yasuo13 = ref('')
const yasuo21 = ref('')
const yasuo22 = ref('')
const yasuo23 = ref('')

const diyuan11 = ref('')
const diyuan12 = ref('')
const diyuan13 = ref('')
const diyuan21 = ref('')
const diyuan22 = ref('')
const diyuan23 = ref('')

const dianjiecao11 = ref('')
const dianjiecao12 = ref('')
const dianjiecao13 = ref('')
const dianjiecao21 = ref('')
const dianjiecao22 = ref('')
const dianjiecao23 = ref('')

const tanbuji11 = ref('')
const tanbuji12 = ref('')
const tanbuji13 = ref('')
const tanbuji21 = ref('')
const tanbuji22 = ref('')
const tanbuji23 = ref('')

const dianchi11 = ref('')
const dianchi12 = ref('')
const dianchi13 = ref('')
const dianchi21 = ref('')
const dianchi22 = ref('')
const dianchi23 = ref('')




// Single generate function for all groups
</script>

<style scoped>
.equipment-section {
  margin-bottom: 30px;
  border-left: 4px solid #7c3aed;
  padding-left: 16px;
}

.equipment-title {
  color: #4c1d95;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.input-group {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-start;
}

.input-label {
  min-width: 160px;
  font-weight: 500;
  color: #475569;
  padding-top: 10px;
}

.input-controls {
  flex: 1;
  display: flex;
  gap: 20px;
}

.column-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 120px;
}

.column-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
}

.form-input {
  padding: 10px 12px;
  border: 1px solid #053676;
  border-radius: 6px;
  width: 80px;
  text-align: right;
  font-size: 14px;
  background: white;
}

.device-parameter {
  background-color: #f8fafc;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 36px;
  max-width: 920px;
  margin: 0 auto;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: #1e293b;
}

.title {
  color: #4c1d95;
  text-align: center;
  margin-bottom: 32px;
  font-size: 28px;
  font-weight: 700;
  padding-bottom: 16px;
  border-bottom: 2px solid #7c3aed;
  letter-spacing: 0.5px;
}

.section-title {
  color: #475569;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.form-section, .info-section {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}



.input-wrapper {
  display: flex;
  align-items: center;
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 2px;
  border: 1px solid #f8fafc;
}


.form-input.small {
  width: 100px;
}

.form-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.unit, .info-value {
  margin: 0 12px;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
}

.distribution-btn {
  background-color: #7c3aed;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.distribution-btn:hover {
  background-color: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.btn-text {
  font-size: 14px;
  line-height: 1.2;
}

.file-name {
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-style: italic;
  margin-top: 2px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.info-card {
  background-color: #f8fafc;
  padding: 18px;
  border-radius: 10px;
  border-left: 4px solid #7c3aed;
  transition: transform 0.2s, box-shadow 0.2s;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.info-label {
  display: block;
  font-weight: 500;
  color: #475569;
  margin-bottom: 10px;
  font-size: 15px;
}

.info-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 768px) {
  .device-parameter {
    padding: 24px;
    border-radius: 0;
  }

  .input-group {
    flex-direction: column;
    gap: 8px;
  }

  .input-label {
    min-width: auto;
    padding-top: 0;
    margin-bottom: 6px;
  }

  .input-controls {
    width: 100%;
  }

  .form-input {
    width: 100%;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>
